<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>退货申请</title>
    <link rel="stylesheet" href="/static/member/css/index.css">
    <link rel="stylesheet" type="text/css" href="/static/item/scss/shop.css"/>
    <link rel="stylesheet" type="text/css" href="/static/item/scss/jd.css"/>
    <link rel="stylesheet" href="/static/item/scss/header.css"/>
    <link rel="stylesheet" type="text/css" href="/static/item/bootstrap/css/bootstrap.css"/>
    <script src="/static/member/js/jquery-3.1.1.min.js"></script>
    <script src="/static/member/js/index.js"></script>
    <style media="screen">
        * {
            font-family: "微软雅黑";
        }
        .evaluate_main{
            background: #fff;
            padding: 14.5px 19px;
            width: 1192px;
            margin: 0 auto;
            padding-bottom: 28px;
            margin-bottom: 20px;
        }

        .evaluate_title{
            font-size: 18px;
            color: #1E1E1E;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 12px;
        }

        .evaluate_title .line{
            width: 4px;
            height: 16px;
            background: #F5B937;
            margin-right: 6px;
        }


        .evaluateP_info{
            border: 1px solid rgba(231,231,231,1);
        }

        .evaluateP_info .info_tit{
            padding: 6px 8.5px;
            background: #F5F5F5;
            font-size: 7px;
        }


        .info_main{
            display: flex;
            justify-content: space-between;
        }

        .info_main .left {
            padding: 31.5px 55px;
            padding-top: 63px;
            flex-shrink: 0;
            border-right: 1px solid #E7E7E7;
        }


        .info_main .left .imgWrap{
            width: 282px;
            margin: 0 auto;
            margin-bottom: 15px;
            border: 1px solid #000;
        }

        .info_main .left .imgWrap img {
            height: 100%;
            width: 100%;
        }

        .info_main .left .description{
            color: #232323;
            font-weight: 400;
            font-size: 7px;
            margin-bottom: 22px;
            width: 341px;
            text-align: center;
            line-height: 22.79px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            /* 代表第几行进行超出部分省略的操作 */
            -webkit-line-clamp: 3;
            overflow: hidden;
        }

        .info_main .left .price{
            color: #E1251B;
            font-size: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 23px;
        }

        .info_main .left .price span:nth-child(1){
            font-size: 18px;
        }

        .info_main .left .price span:nth-child(2){
            font-size: 14px;
        }

        .info_main .left .specification{
            color: #9C9C9C;
            font-size: 14px;
            text-align: center;
        }



        .info_main .right{
            padding: 27px 35px;
            flex:1
        }

        .info_main .right .right_tit{
            font-size: 18px;
            color: #161616;
            font-weight: 400;
        }

        .info_main .right .evaluate_div{
            font-size: 14px;
            color: #727272;
            padding: 16px 0;
        }

        .info_main .right .evaluate_div div{
            margin: 8px 0;
            display: flex;
            align-items: center;
        }

        .info_main .right input:focus,
        .info_main .right textarea:focus,
        .info_main .right .form-control:focus{
            box-shadow: none;
            border-color: #ced4da;
        }

        .info_main .right textarea{
            background: #F4F4F4;
        }

        .info_main .right .imgList{
            flex: 1;
            display: flex;
            justify-content: flex-start;
            align-items: flex-end;
            flex-wrap: wrap;
        }

        .info_main .right .imgList .imgWrap{
            display: inline-block;
            width: 85px;
            height: 80px;
            margin-right: 10px;
        }

        .info_main .right .imgList .imgWrap img{
            width: 100%;
            height: 100%;
        }

        .chooseFile{
            vertical-align: baseline;
            padding: 6px 10px;
            color: #F5B937;
            border: 1px solid #F5B937;
            display: inline-block;
            font-size: 12px;
            border-radius: 3px;
            cursor: pointer;
        }

        #imgHelp{
            font-size: 10px;
            color: #C6C6C6;
            margin-top: 13px;
        }

        .submit_evaluate{
            /*background:rgba(245,185,55,1);*/
            border-radius:4px;
            font-size:14px;
            font-family:Microsoft YaHei;
            font-weight:400;
            color:rgba(255,255,255,1);
            display: inline-block;
            padding: 0px 20px;
            margin-top: 40px;
            margin-left: 110px;
            margin-bottom: 41px;
            cursor: pointer;
            line-height: 36px;
        }


        input::placeholder,
        select::placeholder,
        textarea::placeholder{
            font-size: 14px!important;
        }


        input,select,textarea{
            font-size: 14px!important;
            background: #F4F4F4!important;
            border:1px solid rgba(228,228,228,1)!important
        }



        /* 星级评分 */
        .shop-rating {
            height: 25px;
            overflow: hidden;
            zoom: 1;
            padding: 2px 0px;
            position: relative;
            z-index: 999;
        }

        .shop-rating span {
            height: 23px;
            display: block;
            line-height: 23px;
            float: left;
        }

        .shop-rating span.title {
            width: 125px;
            text-align: right;
            margin-right: 5px;
        }

        .shop-rating ul {
            float: left;
            margin: 0;
            padding: 0
        }

        .shop-rating .result {
            margin-left: 20px;
            padding-top: 2px;
        }

        .shop-rating .result span {
            color: #ff6d02;
        }

        .shop-rating .result em {
            color: #f60;
            font-family: arial;
            font-weight: bold;
        }

        .shop-rating .result strong {
            color: #666666;
            font-weight: normal;
        }

        .rating-level,
        .rating-level a {
            background: url(http://a.tbcdn.cn/app/rc/img/star_v2.png) no-repeat scroll 1000px 1000px;
        }

        .rating-level {
            background-position: 0px 0px;
            width: 125px;
            height: 23px;
            position: relative;
            z-index: 1000;
            margin-right: 10px;
        }

        .rating-level li {
            display: inline;
        }

        .rating-level a {
            line-height: 23px;
            height: 23px;
            position: absolute;
            top: 0px;
            left: 0px;
            text-indent: -999em;
            *zoom: 1;
            outline: none;
        }


        .rating-level a.one-star {
            width: 20%;
            z-index: 6;
        }

        .rating-level a.two-stars {
            width: 40%;
            z-index: 5;
        }

        .rating-level a.three-stars {
            width: 60%;
            z-index: 4;
        }

        .rating-level a.four-stars {
            width: 80%;
            z-index: 3;
        }

        .rating-level a.five-stars {
            width: 100%;
            z-index: 2;
        }

        .rating-level .current-rating,
        .rating-level a:hover {
            background-position: 0 -28px;
        }

        .rating-level a.one-star:hover,
        .rating-level a.two-stars:hover,
        .rating-level a.one-star.current-rating,
        .rating-level a.two-stars.current-rating {
            background-position: 0 -116px;
        }

        .rating-level .three-stars .current-rating,
        .rating-level .four-stars .current-rating,
        .rating-level .five-stars .current-rating {
            background-position: 0 -28px;
        }
        /*外层div*/
        .input-file-box{
            border: 1px solid gray;
            width: 150px;
            height: 150px;
            position: relative;
            text-align: center;
            border-radius: 8px;
        }
        /*文字描述*/
        .input-file-box > span{
            display: block;
            width: 100px;
            height: 30px;
            position: absolute;
            top: 0px;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            color: gray;
        }
        /*input框*/
        .input-file-box #uploadfile{
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
        .img-box { border:1px solid #000; width:300px; height:100px}
        .img-box img{width:300px; height:100px}

        .img-box{ border:1px solid #000; width:300px; height:100px;overflow:hidden}
        .img-box img{max-width:300px;_width:expression(this.width > 300 ? "300px" : this.width);}
        .close{
            position: absolute;
            top: 1px;
            right: 1px;
        }
    </style>
</head>

<body>

<div class="evaluate_main">
    <div class="evaluate_title">
        <div class="line"></div>
        商品详情
    </div>

    <table class="table" th:each="order:${order.page.list}">
        <tr class="tr" th:each="orderItem,itemStat:${order}">
            <div class="evaluateP_info">
                <div class="info_tit">
                    <span style="color: #404040;">订单号：</span>
                    <span style="color: #9E9E9E;">[[${orderItem.orderSn}]]</span>
                </div>
                <div class="info_main">
                    <div class="left">
                        <div class="imgWrap">
                            <img th:src="${orderItem.skuPic}" alt="" class="img">
                        </div>
                        <div class="description">
                            [[${orderItem.skuName}]]
                        </div>
                        <div class="price">
                            <!--          <span> 总额 ￥[[${#numbers.formatDecimal(order.payAmount,3,2)}]</span>-->
                            <p style="margin-bottom:5px; font-size: 15px">金额 ￥[[${#numbers.formatDecimal(orderItem.realAmount,3,2)}]]</p>
                        </div>

                                <div class="specification">数量：× [[${orderItem.skuQuantity}]]</div>
                    </div>
                    <div class="right">
                        <form id = "commentForm" method="post"  action="http://order.anlimall.com/tuihuoUrl">
                            <div><input type="hidden" id ="orderSn" name="orderSn" th:attr="orderSn=${orderItem.orderSn}"></div>
                            <div class="right_tit">退货原因</div>
                        <div class="evaluate_div">
                            <label><input name="reasonRadio"  type="radio" value="0" />拍错 </label></br>
                            <label><input name="reasonRadio" type="radio" value="1" />不喜欢 </label></br>
                            <label><input name="reasonRadio" type="radio" value="2" />实物与描述不符 </label></br>
                            <label><input name="reasonRadio" type="radio" value="3" />其它原因 </label></br>
<!--                            <div>-->
<!--                                <span>描述相符：</span>-->
<!--                                <ul class="rating-level" id="stars1">-->
<!--                                    &lt;!&ndash; start:value 即设置当前星数的分值 &ndash;&gt;-->
<!--                                    <li><a class="one-star" star:value="100" href="#">100</a></li>-->
<!--                                    <li><a class="two-stars" star:value="200" href="#">200</a></li>-->
<!--                                    <li><a class="three-stars" star:value="300" href="#">300</a></li>-->
<!--                                    <li><a class="four-stars" star:value="400" href="#">400</a></li>-->
<!--                                    <li><a class="five-stars" star:value="500" href="#">500</a></li>-->
<!--                                </ul>-->
<!--                                <span class="result" id="stars1-tips"></span>-->
<!--                                <input type="hidden" id="stars1-input" name="a" value="" size="1" />-->
<!--                            </div>-->
<!--                            <div>-->
<!--                                <span>服务态度：</span>-->
<!--                                <ul class="rating-level" id="stars2">-->
<!--                                    &lt;!&ndash; start:value 即设置当前星数的分值 &ndash;&gt;-->
<!--                                    <li><a class="one-star" star:value="100" href="#">100</a></li>-->
<!--                                    <li><a class="two-stars" star:value="200" href="#">200</a></li>-->
<!--                                    <li><a class="three-stars" star:value="300" href="#">300</a></li>-->
<!--                                    <li><a class="four-stars" star:value="400" href="#">400</a></li>-->
<!--                                    <li><a class="five-stars" star:value="500" href="#">500</a></li>-->
<!--                                </ul>-->
<!--                                <span class="result" id="stars2-tips"></span>-->
<!--                                <input type="hidden" id="stars2-input" name="a" value="" size="2" />-->
<!--                            </div>-->
<!--                            <div>-->
<!--                                <span>发货速度：</span>-->
<!--                                <ul class="rating-level" id="stars3">-->
<!--                                    &lt;!&ndash; start:value 即设置当前星数的分值 &ndash;&gt;-->
<!--                                    <li><a class="one-star" star:value="100" href="#">100</a></li>-->
<!--                                    <li><a class="two-stars" star:value="200" href="#">200</a></li>-->
<!--                                    <li><a class="three-stars" star:value="300" href="#">300</a></li>-->
<!--                                    <li><a class="four-stars" star:value="400" href="#">400</a></li>-->
<!--                                    <li><a class="five-stars" star:value="500" href="#">500</a></li>-->
<!--                                </ul>-->
<!--                                <span class="result" id="stars3-tips"></span>-->
<!--                                <input type="hidden" id="stars3-input" name="a" value="" size="2" />-->
<!--                            </div>-->
                        </div>
<!--                        <form id = "commentForm" method="post"  action="http://www.baidu.com">-->
                            <div class="right">
<!--                                <div class="right_tit">商品评分</div>-->
<!--                                <div class="evaluate_div">-->
<!--                                    <div>-->
<!--                                        <span>商品评分：</span>-->
<!--                                        <ul class="rating-level" id="stars4">-->
<!--                                            &lt;!&ndash; start:value 即设置当前星数的分值 &ndash;&gt;-->
<!--                                            <li><a class="one-star" star:value="100" href="#">100</a></li>-->
<!--                                            <li><a class="two-stars" star:value="200" href="#">200</a></li>-->
<!--                                            <li><a class="three-stars" star:value="300" href="#">300</a></li>-->
<!--                                            <li><a class="four-stars" star:value="400" href="#">400</a></li>-->
<!--                                            <li><a class="five-stars" star:value="500" href="#">500</a></li>-->
<!--                                        </ul>-->
<!--                                        <span class="result" id="stars4-tips"></span>-->
<!--                                        <input type="hidden" id="stars4-input" name="a" value="" size="2" />-->
<!--                                    </div>-->
<!--                                </div>-->

                                <!--          <div class="form-check form-check-inline" style="margin-right: 30px;">-->
                                <!--            <input class="form-check-input" type="radio" name="evaluate" value="3" id="good">-->
                                <!--            <label class="form-check-label">好评</label>-->
                                <!--          </div>-->
                                <!--          <div class="form-check form-check-inline" style="margin-right: 30px;">-->
                                <!--            <input class="form-check-input" type="radio" name="evaluate" value="2" checked id="soso">-->
                                <!--            <label class="form-check-label">中评</label>-->
                                <!--          </div>-->
                                <!--          <div class="form-check form-check-inline">-->
                                <!--            <input class="form-check-input" type="radio" name="evaluate" value="1" id="bad">-->
                                <!--            <label class="form-check-label">差评</label>-->
                                <!--          </div>-->
                                <div class="form-group" style="display: flex;margin: 23px 0;">
                                    <label style="width: 80px;flex-shrink: 0;">退货原因：</label>
                                    <textarea name = "reason" class="form-control" rows="4" style="resize: none;width: 348px;" placeholder="填写具体退货原因！"></textarea>
                                </div>
                                <div class="form-group" style="display: flex">
                                    <label style="width: 80px;flex-shrink: 0;">上传图片：</label>
                                    <div class="imgList">
                                        <!--              <div class="imgWrap"><img-->
                                        <!--                      src="../resources/style/system/front/default/images/default.png" alt=""></div>-->
                                        <!--              <div class="imgWrap"><img-->
                                        <!--                      src="../resources/style/system/front/default/images/default.png" alt=""></div>-->
                                        <!--              <div class="imgWrap"><img-->
                                        <!--                      src="../resources/style/system/front/default/images/default.png" alt=""></div>-->
                                        <!--              <div class="chooseFile" id = "chooseFile">选择文件</div>-->
                                        <!--              <small id="imgHelp"-->
                                        <!--                     class="form-text text-muted">最多可上传3张图片，每张图片大小不超过5M,支持bmp,gif,jpg,png,jpeg格式文件</small>-->
                                        <!--              <input id="upload" name="files" accept="image/*" type="file" style="display: none" >-->
                                        <div class="input-file-box" style="width: 250px;height: 150px">
                                            <span>点击上传图片</span>
                                            <input type="file"  accept="image/gif,image/jpeg,image/jpg,image/png" name="file" id="uploadfile" multiple>

                                        </div>
                                        <div id="img-box" style="width: 100%;">
                                            <input type="hidden" value="picture" name="test" id="test">
                                            <input  type="hidden" name="skuId" th:value="*{orderItem.skuId}">
                                        </div>
                                        <div class="submit_evaluate" style="width: 120px;height: 40px">
                                            <input type="submit" id="commentBt" value="提交申请" style=";color:orange;width: 100px;height: 40px">
                                        </div>

                                        <script>
                                            var orderSn = $("#orderSn").attr("orderSn");
                                            document.getElementById("orderSn").value =orderSn;
                                            //   function changImg(e){
                                            //   for (var i = 0; i < e.target.files.length; i++) {
                                            //     var file = e.target.files.item(i);
                                            //     //验证是否为图片，不是就跳出循环
                                            //     if (!(/^image\/.*$/i.test(file.type))) {
                                            //       alert("不是图片！")
                                            //       continue;
                                            //     }
                                            //     //实例化FileReader API
                                            //     var freader = new FileReader();
                                            //     freader.readAsDataURL(file);
                                            //     freader.onload = function(e) {
                                            //       $("#image").attr("src",e.target.result);  //显示图片
                                            //     }
                                            //   }
                                            // }

                                            // getSuffix() 方法用于获取文件名的后缀
                                            var getSuffix = function (fileName) {
                                                var pos = fileName.lastIndexOf(".");
                                                var suffix = '';
                                                if (pos != -1) {
                                                    suffix = fileName.substring(pos);
                                                }
                                                return suffix;
                                            };
                                            // getFile() 方法用于获取文件并且上传图片
                                            function getFile(obj) {
                                                //获取文件路径
                                                var file = $("input[type='file']").val();
                                                //创建一个空对象实例
                                                var formData = new FormData();
                                                //获取当前时间戳加上获取的文件后缀 为文件名
                                                var filename = new Date().getTime() + getSuffix(file);
                                                //注意formData里append添加的键的大小写
                                                formData.append('key', obj.data.dir + filename); //存储在oss的文件路径
                                                formData.append('OSSAccessKeyId', obj.data.accessid); //accessKeyId
                                                console.log("让我看看");
                                                console.log(obj);
                                                formData.append('policy', obj.data.policy); //policy
                                                formData.append('Signature', obj.data.signature); //签名
                                                // formData.append('callback', obj.callback); //签名
                                                //如果是base64文件，那么直接把base64字符串转成blob对象进行上传就可以了
                                                formData.append("file", $("input[type='file']")[0].files[0]);
                                                formData.append('success_action_status', 200); //成功后返回的操作码
                                                var url = 'http://anlimall.oss-cn-shenzhen.aliyuncs.com';
                                                // var fileUrl = url + '/' + 'ceshi/' + filename;
                                                var fileUrl = obj.data.host+'/'+formData.get("key");
                                                $.ajax({
                                                    type:'POST',
                                                    data:formData,
                                                    processData:false,//这里默认为true,必须手动改为false
                                                    contentType:false,//这里必须手动改为false,避免出现解析错误
                                                    cache: false,//缓存必须改为false,保证每次都能读取最新数据
                                                    url:url,
                                                    success:function (res) {
                                                        console.log("上传成功！");//文件上传成功提示
                                                        console.log(fileUrl);
                                                        div=document.createElement('div');

                                                         // var cishu = 1;
                                                        div.innerHTML='<img src="'+fileUrl+'" data-img="'+fileUrl+'"  style=\'max-width: 200px;_width: expression(this.width > 200 ? "200px" : this.width);max-height: 200px;_height: expression(this.height > 200 ? "200px" : this.height); border: 10px solid #fdfdfd;float:left; position: relative;\'/> ';
                                                        // div.innerHTML='<button class="close" onclick="closediv()">关闭</button>';
                                                        // div.innerHTML=' <div style="position:absolute;top:10px;right:10px">删除</div>';

                                                        document.getElementById("img-box").appendChild(div);

                                                        // div2=document.createElement('div');
                                                        // div2.innerHTML='<input type="text" name="pic1" value="'+fileUrl+'">';
                                                        // document.getElementById("img-box").appendChild(div2);
                                                        // var orderSn = $("#orderSn").attr("orderSn");
                                                        document.getElementById("test").value =document.getElementById("test").value+"="+ fileUrl;
                                                    },
                                                    error:function (error) {
                                                        console.log("发生了错误");
                                                        console.log(error);//文件上传失败打印错误信息
                                                    }
                                                })
                                            };
                                            // //选择上传文件
                                            // $("input[type='file']").change(function () {
                                            //   $.ajax({
                                            //     url:"/thirdparty/oss/policy",
                                            //     data:{"album_id":audio_id},//上传文件需要的参数,我这里为相册id,按需更改
                                            //     type: "GET",
                                            //     success:function (res) {
                                            //       var obj = res;//接收请求数据
                                            //       getFile(obj);//执行getFile()函数向阿里云上传文件
                                            //     }
                                            //   });
                                            // });

                                            window.onload=function(){
                                                var input=document.getElementById("uploadfile");
                                                var div;
                                                // 当用户上传时触发事件
                                                input.onchange=function(){
                                                    readFile(this);
                                                }
                                                //处理图片并添加都dom中的函数
                                                var readFile=function(obj){
                                                    // 获取input里面的文件组
                                                    var fileList=obj.files;
                                                    console.log(fileList);
                                                    //对文件组进行遍历，可以到控制台打印出fileList去看看
                                                    for(var i=0;i<fileList.length;i++){
                                                        var reader= new FileReader();
                                                        reader.readAsDataURL(fileList[i]);
                                                        // 当文件读取成功时执行的函数
                                                        reader.onload=function(e){
                                                            $.ajax({
                                                                url:"http://thirdparty.anlimall.com/oss/policy",
                                                                // data:{"id":this.result},//上传文件需要的参数,我这里为相册id,按需更改
                                                                // dataType:'jsonp',
                                                                // processData: false,
                                                                type: "GET",
                                                                success:function (res) {
                                                                    var obj = res;//接收请求数据
                                                                    console.log(obj);
                                                                    getFile(obj);//执行getFile()函数向阿里云上传文件
                                                                },
                                                                error:function (res) {
                                                                    console.log("错误"+res);

                                                                }
                                                            });
                                                        }
                                                    }
                                                }
                                            }
                                            $("#commentBt").click(function(){
                                                // function getEntity(commentForm) {
                                                $(commentForm).find( "[data-img]" ).each( function () {
                                                    var field = $(img).attr("data-img");

                                                    console.log("aahahaaa");
                                                    console.log(field);
                                                });
                                            });
                                        </script>
                                        <script>
                                            // document.getElementById("chooseFile").onclick = function () {
                                            //   var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
                                            //   console.log(objUrl, '输出图片路径')
                                            //   if (objUrl) {
                                            //     $("#pic").attr("src", objUrl); //将图片路径存入src中，显示出图片
                                            //     upimg();
                                            //   }
                                            // };
                                            // // 上传的方法
                                            // $(function(){
                                            //   $("#chooseFile").bind("click",function(){
                                            //       location.href = "http://www.baidu.com/"
                                            //   })
                                            // });
                                            // $(function () {
                                            //   $(".chooseFile").click(function () {
                                            //     $("#upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传
                                            //     $("#upload").on("change", function () {
                                            //       var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
                                            //       console.log(objUrl, '输出图片路径')
                                            //       if (objUrl) {
                                            //         $("#pic").attr("src", objUrl); //将图片路径存入src中，显示出图片
                                            //         upimg();
                                            //       }
                                            //     });
                                            //   });
                                            // });
                                            //
                                            // //建立一?可存取到?file的url
                                            // function getObjectURL(file) {
                                            //   var url = null;
                                            //   if (window.createObjectURL != undefined) { // basic
                                            //     url = window.createObjectURL(file);
                                            //   } else if (window.URL != undefined) { // mozilla(firefox)
                                            //     url = window.URL.createObjectURL(file);
                                            //   } else if (window.webkitURL != undefined) { // webkit or chrome
                                            //     url = window.webkitURL.createObjectURL(file);
                                            //   }
                                            //   return url;
                                            // }
                                            // //上传头像到服务器
                                            // function upimg() {
                                            //   console.log(344)
                                            //   var pic = $('#upload')[0].files[0];
                                            //   var file = new FormData();
                                            //   file.append('image', pic);
                                            //   $.ajax({
                                            //     url: "/uploadImg",
                                            //     type: "post",
                                            //     data: file,
                                            //     cache: false,
                                            //     contentType: false,
                                            //     processData: false,
                                            //     success: function (data) {
                                            //       console.log(data);
                                            //       var res = data;
                                            //       // $("#resimg").append("<img src='/" + res + "'>")
                                            //     }
                                            //   });
                                            // }
                                        </script>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </tr>
    </table>
</div>


</body>

<script>
    // 提交按钮
    function submit_evaluate(){
        // 输出描述相符、服务态度、发货速度的评星value值
        console.log(document.getElementById("stars1-input").value)
        console.log(document.getElementById("stars2-input").value)
        console.log(document.getElementById("stars3-input").value)
        console.log(document.getElementById("stars4-input").value)
    }
    var Class = {
        create: function () {
            return function () { this.initialize.apply(this, arguments); }
        }
    }
    var Extend = function (destination, source) {
        for (var property in source) {
            destination[property] = source[property];
        }
    }
    function stopDefault(e) {
        if (e && e.preventDefault) {
            e.preventDefault();
        } else {
            window.event.returnValue = false;
        }
        return false;
    }
    /**
     * 星星打分组件
     *
     */
    var Stars = Class.create();
    Stars.prototype = {
        initialize: function (star, options) {
            this.SetOptions(options); //默认属性
            var flag = 999; //定义全局指针
            var isIE = (document.all) ? true : false; //IE?
            var starlist = document.getElementById(star).getElementsByTagName('a'); //星星列表
            var input = document.getElementById(this.options.Input) || document.getElementById(star + "-input"); // 输出结果
            var tips = document.getElementById(this.options.Tips) || document.getElementById(star + "-tips"); // 打印提示
            var nowClass = " " + this.options.nowClass; // 定义选中星星样式名
            var tipsTxt = this.options.tipsTxt; // 定义提示文案
            var len = starlist.length; //星星数量


            for (i = 0; i < len; i++) { // 绑定事件 点击 鼠标滑过
                starlist[i].value = i;
                starlist[i].onclick = function (e) {
                    stopDefault(e);
                    this.className = this.className + nowClass;
                    flag = this.value;
                    input.value = this.getAttribute("star:value");
                    tips.innerHTML = tipsTxt[this.value]
                }
                starlist[i].onmouseover = function () {
                    if (flag < 999) {
                        var reg = RegExp(nowClass, "g");
                        starlist[flag].className = starlist[flag].className.replace(reg, "")
                    }
                }
                starlist[i].onmouseout = function () {
                    if (flag < 999) {
                        starlist[flag].className = starlist[flag].className + nowClass;
                    }
                }
            };
            if (isIE) { //FIX IE下样式错误
                var li = document.getElementById(star).getElementsByTagName('li');
                for (var i = 0, len = li.length; i < len; i++) {
                    var c = li[i];
                    if (c) {
                        c.className = c.getElementsByTagName('a')[0].className;
                    }
                }
            }
        },
        //设置默认属性
        SetOptions: function (options) {
            this.options = {//默认值
                Input: "",//设置触保存分数的INPUT
                Tips: "",//设置提示文案容器
                nowClass: "current-rating",//选中的样式名
                tipsTxt: ["1分-严重不合格", "2分-不合格", "3分-合格", "4分-优秀", "5分-完美"]//提示文案
            };
            Extend(this.options, options || {});
        }
    }

    /* For TEST */
    function teststars() {
        alert(document.getElementById("stars1-input").value + "|" + document.getElementById("stars2-input").value)
    }

    var Stars1 = new Stars("stars1", { nowClass: "current-rating", tipsTxt: ["1分-严重不合格", "2分-不合格", "3分-合格", "4分-优秀", "5分-完美"] })
    var Stars2 = new Stars("stars2", { nowClass: "current-rating", tipsTxt: ["1分-严重不合格", "2分-不合格", "3分-合格", "4分-优秀", "5分-完美"] })
    var Stars3 = new Stars("stars3", { nowClass: "current-rating", tipsTxt: ["1分-严重不合格", "2分-不合格", "3分-合格", "4分-优秀", "5分-完美"] })
    var Stars4 = new Stars("stars4", { nowClass: "current-rating", tipsTxt: ["1分-严重不合格", "2分-不合格", "3分-合格", "4分-优秀", "5分-完美"] })

</script>
</html>
